<template>
  <el-select v-model="wValue" :placeholder="$attrs.placeholder || '请选择'" clearable v-bind="$attrs" v-on="$listeners">
    <slot></slot>
    <el-option v-for="item in wOptions" :key="item.value" :label="item.label" :value="item.value" />
    <slot name="appendOptions"></slot>
  </el-select>
</template>

<script>
export default {
  name: 'WSelect',
  props: {
    value: {
      type: [Number, String, Array]
    },
    // 字典键
    dictKey: {
      type: String
    },
    // 传入的选项
    options: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    wValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    wOptions() {
      let arr = []

      if (this.dictKey) {
        arr = this.$store.getters.dict.find((n) => n.key === this.dictKey)?.value || []
      } else if (this.options.length > 0) {
        arr = this.options
      }

      return arr
    }
  }
}
</script>

<style scoped lang="scss"></style>
